<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

</script>

<template>

    <el-form :model="config" label-width="80px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="颜色">
            <el-color-picker v-model="config.color" />
        </el-form-item>
        <el-form-item label="粗度">
            <el-input-number v-model="config.borderWidth" />
        </el-form-item>
        <el-form-item label="宽度">
            <el-input type="number" v-model="config.width" :disabled="config.width_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.width_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="间距">
            <el-input-number v-model="config.margin" />
        </el-form-item>
        <!-- <el-form-item label="自定义项">
                <el-input type="text" v-model="config.define" />
            </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>


</template>

<style scoped></style>